<template>
  <el-calendar v-model="checked" @click="updateMood">
    <template #dateCell="{ data }">
      <div>
        {{ data.day.split('-')[2] }}
      </div>
      <el-tag v-if="checkDate(data.day)[0]" style="font-weight: 700"
              :type="checkDate(data.day)[1].mood === 'Bad' ? 'danger' : checkDate(data.day)[1].mood === 'Nice' ? '':'success'">
        {{ checkDate(data.day)[1].mood }}
      </el-tag>
    </template>
  </el-calendar>
  <el-dialog v-model="modal" width="500px">
    <el-form v-model="formData">
      <el-form-item>
        <el-select v-model="formData.mood">
          <el-option v-for="moodType in moodTypes" :value="moodType"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitMood">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import store from '../store'
import {ElNotification} from 'element-plus'

export default {
  name: "Checkin",
  mounted() {
    this.initNotification()
  },
  data() {
    return {
      checked: '',
      modal: false,
      moodTypes: [
        'Nice',
        'Normal',
        'Bad'
      ],
      formData: {
        mood: ''
      },
    }
  },
  computed: {
    mood() {
      return store.getters.getMood
    },
    login_state() {
      return Boolean(window.sessionStorage.getItem('login_state'))
    }
  },
  methods: {
    checkDate(date) {
      let mood = this.mood
      let res = mood.filter(value => {
        return value.date === date
      })
      return [res.length !== 0, res[0]]
    },
    updateMood() {
      const nowDate = new Date().toLocaleDateString()
      const checkDate = new Date(this.checked).toLocaleDateString()
      if (!this.login_state) return
      if (this.checkDate(checkDate.replaceAll('/','-'))[0]){
        return
      }
      if (checkDate === nowDate) {
        this.modal = true
      }
    },
    submitMood() {
      let moodListItem = {
        date: new Date().toLocaleDateString(),
        mood: this.formData.mood
      }
      console.log(moodListItem)
      store.commit('submitMood', moodListItem)
      this.modal = false
    },
    initNotification() {
      ElNotification({
        title: '使用提示╰(*°▽°*)╯',
        message: '登陆后点击当天日期可以进行状态签到~',
        offset: 100,
        showClose: false,
        duration: 3000,
      })
    }
  }
}
</script>

<style scoped>

</style>